﻿@{
ViewData["Title"] = "Home Page";
List<BookCategory> categories = ViewData["categories"] as List<BookCategory>;
}
@model BookUploadModel
<div class="container mt-5">
    <div class="container mt-5">
        <h1 class="mb-4">Upload Book</h1>
        <form method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label for="Title">Book Title</label>
                <input type="text" class="form-control" id="Title" name="Title" required>
                @Html.ValidationMessageFor(model => model.Title)
            </div>
            <div class="form-group">
                <label for="Author">Author</label>
                <input type="text" class="form-control" id="Author" name="Author" required>
                @Html.ValidationMessageFor(model => model.Author)
            </div>
            <div class="form-group">
                <label for="Description">Description</label>
                <textarea class="form-control" id="Description" name="Description" rows="3" required></textarea>
                @Html.ValidationMessageFor(model => model.Description)
            </div>
            <div class="form-group">
                <label for="upload-cover">Cover Image</label>
                <input type="hidden" class="form-control-file" id="data-cover" name="CoverImage" accept="image/*">
                <div style="width: 132px;">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="upload-cover"  style="width: 100%; height: 150px;">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="Type">Book Type</label>
                <select class="form-control" id="Type" name="Type" required>
                    <!option value="TXT">TXT</!option>
                    <!option value="PDF">PDF</!option>
                </select>
                @Html.ValidationMessageFor(model => model.Type)
            </div>

            <div class="form-group">
                <label for="Category">Book Type</label>
                <select class="form-control" id="Category" name="Category" required>
                    @foreach (var category in categories)
                    {
                    <!option value="@category.Id">@category.Name</!option>
                    }
                </select>
                @Html.ValidationMessageFor(model => model.Category)
            </div>

            <div class="form-group">
                <label for="Status">Book Type</label>
                <select class="form-control" id="Status" name="Status" required>
                    <!option value="Updating">Updating</!option>
                    <!option value="Completed">Completed</!option>
                </select>
                @Html.ValidationMessageFor(model => model.Status)
            </div>

            <div class="form-group">
                <label for="file">Upload Book File</label>
                <input type="file" class="form-control-file" id="file" name="StoragePath" required>
                @Html.ValidationMessageFor(model => model.StoragePath)
            </div>
            <button type="submit" class="btn btn-primary">上传</button>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function () {
        // 图片预览
        $('#CoverImage').change(function () {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    $('#image-preview').attr('src', e.target.result);
                }
                reader.readAsDataURL(file);
            }
        });
    });
</script>

@section Scripts
{
<link href="~/lib/layui/css/layui.css" rel="stylesheet">
<script src="~/lib/layui/layui.js"></script>
<script>
    layui.use(function(){
        var upload = layui.upload;
        var uploadInst = upload.render({
            elem: '#upload-cover',
            url: '@Url.Action("UploadFiles", "Home")', // 实际使用时改成您自己的上传接口即可。
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#upload-cover').attr('src', result); // 图片链接（base64）
                });
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                var id = '#' + this.id.replace("upload", "data");
                console.log(id);
                $(id).val(res.path);
            },
            error: function(){
            },
            // 进度条
            progress: function(n, elem, e){
                // element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            },
            accept: "images"
        });
    });
</script>
}